/*
Base: #c8d3d3

Split complimentary:
#c8d3d3 #c8cfd3 #d3c8cd #d3cdc8 #cdcdcd #ffffff

Saturation variation:
#b4e6e6 #bedcdc #c8d3d3 #cdcdcd #cdcdcd

Tint and shade variation:
#ffffff #ffffff #c8d3d3 #8fa5a5 #5c7373
*/
body {
	margin: 0;
	background: #c8d3d3
}

div.banner {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 80px;
	background: #5c7373 url('../img/header-mid.png') repeat-x
}

div.banner-left {
	position: absolute;
	display: inline-block;
	font-family: 'Orbitron';
	font-size: 22pt;
	color: #ffffff;
	width: 400px;
	height: 100%;
	background: url('../img/header-left.png') no-repeat;
	height: 100%;
}

div.banner-left p {
	margin: 0.7em 0 0 2em
}

div.banner-center {
	display: inline-block;
}

div.banner-right {
	position: absolute;
	display: inline-block;
	right: 0;
	width: 300px;
	margin: 16px 1em 0 0
}

canvas {
	display: none;
	background: #c8d3d3
}

div.footer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 30px;
	background: #5c7373
}

div.footer-top {
	height: 5px;
	border-top: 2px #8f8f8f solid;
	background: #ffffff
}

div.footer-copyright {
	position: absolute;
	right: 0;
	color: #ffffff;
	font: 8pt/25px sans-serif;
	margin: 0 0.5em 0 0
}

#main {
	position: absolute;
	width: 100%;
	height: 100%;
	vertical-align: middle;
}

#main div.loading {
	position: absolute;
	top: 50%;
	width: 100%;
	height: 60px;
	margin-top: -30px;
	text-align: center;
	height: 60px;
}

#main div.loading p {
	font-family: 'Orbitron';
	font-size: 30px;
	color: #ffffff;
	animation: loading 2s infinite
}

@keyframes loading {
    0% {color: #ffffff}
    50% {color: #c8d3d3}
    100% {color: #ffffff}
}
